<template>
  <div class="index-container">
    <!-- main 部分 -->
    <div class="main">
      <!-- 侧边栏部分 -->
      <div class="nav">
        <ul>
          <li><router-link to="/index/course-selection">选课中心</router-link></li>
          <li><router-link to="/index/score-check">成绩查看</router-link></li>
          <li><router-link to="/index/classroom-reservation">教室预定</router-link></li>
          <li><router-link to="/index/experiment-appointment">实验预约</router-link></li>
          <li><router-link to="/index/graduation-project">毕设管理</router-link></li>
          <li><router-link to="/index/status-info">学籍信息</router-link></li>
          <li><router-link to="/index/academic-process">学业进程</router-link></li>
        </ul>
      </div>
      <!-- 主页面部分 -->
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.main {
  width: 1200px;
  height: 600px;
  background-color: #eee;
  display: flex;
}
.nav {
  flex: 1;
  width: 200px;
  height: 100%;
  background-color: rgb(241, 243, 244);
  border: 1px solid rgb(224, 218, 218);
}
.content {
  flex: 5;
}
.nav ul li {
  position: relative;
  box-sizing: border-box;
  width: 160px;
  height: 35px;
  line-height: 35px;
  margin: 0 20px;
  padding-left: 5px;
  font-size: 14px;
  color: rgb(163, 163, 163);
  border-bottom: 1px solid rgb(224, 218, 218);
}
.nav ul li::after {
  position: absolute;
  right: 5px;
  content: '';
  line-height: 35px;
  font-family: 'icomoon';
  font-size: 12px;
}
</style>
